<template>
  <div class="about">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>云办公</el-breadcrumb-item>
      <el-breadcrumb-item>审批任务</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 创建审批 -->
      <el-row>
        <el-col :span="4"
          ><el-button type="primary" @click="approvalDialogVisible = true"
            >创建审批</el-button
          ></el-col
        >
      </el-row>
      <!-- 审批列表区 -->
      <el-tabs v-model="activeName">
        <!-- 我的审批列表 -->
        <el-tab-pane label="我的审批" name="first" :key="'first'">
          <div style="display: inline">
            <!-- 我的审批列表搜索 -->
            <el-form :inline="true" ref="approval" :model="approval">
              <el-form-item prop="processState">
                <el-select
                  v-model="approval.processState"
                  placeholder="请选择流程状态"
                  style="width: 150px"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="processName">
                <el-select
                  v-model="approval.processName"
                  placeholder="请选择流程名称"
                  style="width: 150px"
                  clearable
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  size="medium"
                  @click="resetForm('approval')"
                  round
                  >重置</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="medium" @click="getList" round
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
            <!-- 列表展示 -->
            <el-table border stripe :data="approvalList">
              <el-table-column label="序号" type="index"> </el-table-column>
              <el-table-column label="用户名" prop="username">
              </el-table-column>
              <el-table-column label="部门" prop="departmentName">
              </el-table-column>
              <el-table-column label="工号" prop="jobNumber"> </el-table-column>
              <el-table-column label="流程名称" prop="processName">
              </el-table-column>
              <el-table-column label="流程标识" prop="processKey">
              </el-table-column>
              <!-- <el-table-column label="审批状态" prop="processState">
              </el-table-column> -->
              <el-table-column label="审批状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.processState == 0">待审批</span>
                  <span v-if="scope.row.processState == 1">审批中</span>
                  <span v-if="scope.row.processState == 2">审批通过</span>
                  <span v-if="scope.row.processState == 3">审批不通过</span>
                  <span v-if="scope.row.processState == 4">撤销</span>
                  <span v-if="scope.row.processState == 5">等待销假</span>
                </template>
              </el-table-column>
              <el-table-column
                label="流程id"
                prop="processId"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="流程实例id"
                prop="processInstanceId"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="节点负责人角色"
                prop="procCurrNodeUserGroup"
              >
              </el-table-column>
              <el-table-column
                label="进程应用时间"
                prop="procApplyTime"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column label="操作" width="130px">
                <template slot-scope="scope">
                  <!-- <el-button
                    type="primary"
                    size="mini"
                    @click="infoId(scope.row.processId)"
                    >审批操作</el-button
                  > -->
                  <el-button
                    type="danger"
                    size="mini"
                    @click="schedule(scope.row.processId)"
                    >审批进度查询</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="approval.currentPage"
              :page-sizes="[2, 4, 8, 10]"
              :page-size="approval.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <!-- 权限审批列表 -->
        <el-tab-pane label="权限审批任务" name="second" :key="'second'">
          <div style="display: inline">
            <!-- 权限审批列表搜索 -->
            <el-form :inline="true" ref="approval2" :model="approval2">
              <el-form-item prop="processState">
                <el-select
                  v-model="approval2.processState"
                  placeholder="请选择流程状态"
                  style="width: 150px"
                  clearable
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="processName">
                <el-select
                  v-model="approval2.processName"
                  placeholder="请选择流程名称"
                  style="width: 150px"
                  clearable
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  size="medium"
                  @click="resetForm('approval2')"
                  round
                  >重置</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="medium" @click="getList2" round
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
            <el-table border stripe :data="approvalList2">
              <el-table-column label="序号" type="index"> </el-table-column>
              <el-table-column label="用户名" prop="username">
              </el-table-column>
              <el-table-column label="部门" prop="departmentName">
              </el-table-column>
              <el-table-column label="工号" prop="jobNumber"> </el-table-column>
              <el-table-column label="流程名称" prop="processName">
              </el-table-column>
              <el-table-column label="流程标识" prop="processKey">
              </el-table-column>
              <el-table-column label="审批状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.processState == 0">待审批</span>
                  <span v-if="scope.row.processState == 1">审批中</span>
                  <span v-if="scope.row.processState == 2">审批通过</span>
                  <span v-if="scope.row.processState == 3">审批不通过</span>
                  <span v-if="scope.row.processState == 4">撤销</span>
                  <span v-if="scope.row.processState == 5">等待销假</span>
                </template>
              </el-table-column>
              <el-table-column label="流程id" prop="processId">
              </el-table-column>
              <el-table-column label="流程实例id" prop="processInstanceId">
              </el-table-column>
              <el-table-column
                label="节点负责人角色"
                prop="procCurrNodeUserGroup"
              >
              </el-table-column>
              <el-table-column label="进程应用时间" prop="procApplyTime">
              </el-table-column>
              <el-table-column label="操作" width="230px">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="infoId(scope.row.processId)"
                    >审批操作</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    @click="schedule(scope.row.processId)"
                    >审批进度查询</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页区 -->
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="approval2.currentPage"
              :page-sizes="[2, 4, 8, 10]"
              :page-size="approval2.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 创建审批小弹窗 -->
      <el-dialog
        title="创建审批"
        :visible.sync="approvalDialogVisible"
        width="29%"
        @close="approvalDialogClosed"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane label="加班" name="first" :key="'first'">
            <div style="display: inline">
              <el-form
                :model="approvalForm"
                ref="approvalFormRef"
                label-width="90px"
              >
                <el-form-item label="部门名称" prop="departmentName">
                  <el-input v-model="approvalForm.departmentName"></el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="username">
                  <el-input v-model="approvalForm.username"></el-input>
                </el-form-item>
                <el-form-item label="工号" prop="jobNumber">
                  <el-input v-model="approvalForm.jobNumber"></el-input>
                </el-form-item>
                <el-form-item label="申请时间" prop="procApplyTime">
                  <el-date-picker
                    v-model="approvalForm.procApplyTime"
                  ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="流程业务ID" prop="processId">
                  <el-input v-model="approvalForm.processId"></el-input>
                </el-form-item>
                <el-form-item label="流程实例ID" prop="processInstanceId">
                  <el-input v-model="approvalForm.processInstanceId"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="流程标识" prop="processKey">
                  <el-input v-model="approvalForm.processKey"></el-input>
                </el-form-item>
                <el-form-item label="流程名称" prop="processName">
                  <el-input v-model="approvalForm.processName"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="流程状态" prop="processState">
                  <el-input v-model="approvalForm.processState"></el-input>
                </el-form-item> -->

                <el-form-item label="加班时长" prop="duration">
                  <el-input
                    v-model="approvalForm.procOvertime.duration"
                  ></el-input>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                  <el-date-picker
                    v-model="approvalForm.procOvertime.startTime"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker
                    v-model="approvalForm.procOvertime.endTime"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="加班事由" prop=" overtimeReason">
                  <el-input
                    v-model="approvalForm.procOvertime.overtimeReason"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="approvalDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="approvalInfo"
                  >确 定</el-button
                >
              </span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="出差">
            <div style="display: inline">
              <el-form
                :model="approvalForm1"
                ref="approvalFormRef"
                label-width="90px"
              >
                <el-form-item label="部门名称" prop="departmentName">
                  <el-input v-model="approvalForm1.departmentName"></el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="username">
                  <el-input v-model="approvalForm1.username"></el-input>
                </el-form-item>
                <el-form-item label="工号" prop="jobNumber">
                  <el-input v-model="approvalForm1.jobNumber"></el-input>
                </el-form-item>
                <el-form-item label="申请时间" prop="procApplyTime">
                  <el-date-picker
                    v-model="approvalForm1.procApplyTime"
                  ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="流程业务ID" prop="processId">
                  <el-input v-model="approvalForm1.processId"></el-input>
                </el-form-item>
                <el-form-item label="流程实例ID" prop="processInstanceId">
                  <el-input
                    v-model="approvalForm1.processInstanceId"
                  ></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="流程标识" prop="processKey">
                  <el-input v-model="approvalForm1.processKey"></el-input>
                </el-form-item>
                <el-form-item label="流程名称" prop="processName">
                  <el-input v-model="approvalForm1.processName"></el-input>
                </el-form-item>
                <el-form-item label="流程状态" prop="processState">
                  <el-input v-model="approvalForm1.processState"></el-input>
                </el-form-item> -->

                <el-form-item label="出差地点" prop="address">
                  <el-input
                    v-model="approvalForm1.procTravel.address"
                  ></el-input>
                </el-form-item>
                <el-form-item label="出差天数" prop="days">
                  <el-input v-model="approvalForm1.procTravel.days"></el-input>
                </el-form-item>
                <el-form-item label="出差开始时间" prop="startTime">
                  <el-date-picker
                    v-model="approvalForm1.procTravel.startTime"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="出差结束时间" prop="endTime">
                  <el-date-picker
                    v-model="approvalForm1.procTravel.endTime"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="出差事由" prop=" travelReason">
                  <el-input
                    v-model="approvalForm1.procTravel.travelReason"
                  ></el-input>
                </el-form-item>
                <el-form-item label="出行工具" prop="travelTools">
                  <el-input
                    v-model="approvalForm1.procTravel.travelTools"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="approvalDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="approvalInfo1"
                  >确 定</el-button
                >
              </span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="补卡">
            <div style="display: inline">
              <el-form
                :model="approvalForm2"
                ref="approvalFormRef"
                label-width="90px"
              >
                <el-form-item label="部门名称" prop="departmentName">
                  <el-input v-model="approvalForm2.departmentName"></el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="username">
                  <el-input v-model="approvalForm2.username"></el-input>
                </el-form-item>
                <el-form-item label="工号" prop="jobNumber">
                  <el-input v-model="approvalForm2.jobNumber"></el-input>
                </el-form-item>
                <el-form-item label="申请时间" prop="procApplyTime">
                  <el-date-picker
                    v-model="approvalForm2.procApplyTime"
                  ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="流程业务ID" prop="processId">
                  <el-input v-model="approvalForm2.processId"></el-input>
                </el-form-item>
                <el-form-item label="流程实例ID" prop="processInstanceId">
                  <el-input
                    v-model="approvalForm2.processInstanceId"
                  ></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="流程标识" prop="processKey">
                  <el-input v-model="approvalForm2.processKey"></el-input>
                </el-form-item>
                <el-form-item label="流程名称" prop="processName">
                  <el-input v-model="approvalForm2.processName"></el-input>
                </el-form-item>
                <el-form-item label="流程状态" prop="processState">
                  <el-input v-model="approvalForm2.processState"></el-input>
                </el-form-item> -->

                <el-form-item label="补卡理由" prop="fillClockReason">
                  <el-input
                    v-model="approvalForm2.procAdjustJob.fillClockReason"
                  ></el-input>
                </el-form-item>
                <el-form-item label="补卡时间" prop="fillClockTime">
                  <el-date-picker
                    v-model="approvalForm2.procAdjustJob.fillClockTime"
                  ></el-date-picker>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="approvalDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="approvalInfo2"
                  >确 定</el-button
                >
              </span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="调岗">
            <div style="display: inline">
              <el-form
                :model="approvalForm3"
                ref="approvalFormRef"
                label-width="90px"
              >
                <el-form-item label="部门名称" prop="departmentName">
                  <el-input v-model="approvalForm3.departmentName"></el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="username">
                  <el-input v-model="approvalForm3.username"></el-input>
                </el-form-item>
                <el-form-item label="工号" prop="jobNumber">
                  <el-input v-model="approvalForm3.jobNumber"></el-input>
                </el-form-item>
                <el-form-item label="申请时间" prop="procApplyTime">
                  <el-date-picker
                    v-model="approvalForm3.procApplyTime"
                  ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="流程业务ID" prop="processId">
                  <el-input v-model="approvalForm3.processId"></el-input>
                </el-form-item>
                <el-form-item label="流程实例ID" prop="processInstanceId">
                  <el-input
                    v-model="approvalForm3.processInstanceId"
                  ></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="流程标识" prop="processKey">
                  <el-input v-model="approvalForm3.processKey"></el-input>
                </el-form-item>
                <el-form-item label="流程名称" prop="processName">
                  <el-input v-model="approvalForm3.processName"></el-input>
                </el-form-item>
                <el-form-item label="流程状态" prop="processState">
                  <el-input v-model="approvalForm3.processState"></el-input>
                </el-form-item> -->

                <el-form-item label="生效日期" prop="effectiveDate">
                  <el-date-picker
                    v-model="approvalForm3.procAdjustJob.effectiveDate"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="入职日期" prop="hireDate">
                  <el-date-picker
                    v-model="approvalForm3.procAdjustJob.hireDate"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="新部门" prop="newDepartment">
                  <el-input
                    v-model="approvalForm3.procAdjustJob.newDepartment"
                  ></el-input>
                </el-form-item>
                <el-form-item label="新职位" prop="newJob">
                  <el-date-picker
                    v-model="approvalForm3.procAdjustJob.newJob"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="原部门" prop="oldDepartment">
                  <el-input
                    v-model="approvalForm3.procAdjustJob.oldDepartment"
                  ></el-input>
                </el-form-item>
                <el-form-item label="原职位" prop="oldJob">
                  <el-date-picker
                    v-model="approvalForm3.procAdjustJob.oldJob"
                  ></el-date-picker>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="approvalDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="approvalInfo3"
                  >确 定</el-button
                >
              </span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="调薪">
            <div style="display: inline">
              <el-form
                :model="approvalForm4"
                ref="approvalFormRef"
                label-width="90px"
              >
                <el-form-item label="部门名称" prop="departmentName">
                  <el-input v-model="approvalForm4.departmentName"></el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="username">
                  <el-input v-model="approvalForm4.username"></el-input>
                </el-form-item>
                <el-form-item label="工号" prop="jobNumber">
                  <el-input v-model="approvalForm4.jobNumber"></el-input>
                </el-form-item>
                <el-form-item label="申请时间" prop="procApplyTime">
                  <el-date-picker
                    v-model="approvalForm4.procApplyTime"
                  ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="流程业务ID" prop="processId">
                  <el-input v-model="approvalForm4.processId"></el-input>
                </el-form-item>
                <el-form-item label="流程实例ID" prop="processInstanceId">
                  <el-input
                    v-model="approvalForm4.processInstanceId"
                  ></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="流程标识" prop="processKey">
                  <el-input v-model="approvalForm4.processKey"></el-input>
                </el-form-item>
                <el-form-item label="流程名称" prop="processName">
                  <el-input v-model="approvalForm4.processName"></el-input>
                </el-form-item>
                <el-form-item label="流程状态" prop="processState">
                  <el-input v-model="approvalForm4.processState"></el-input>
                </el-form-item> -->

                <el-form-item label="调整额度" prop="adjustLines">
                  <el-input
                    v-model="approvalForm4.procAdjustSalary.adjustLines"
                  ></el-input>
                </el-form-item>
                <el-form-item label="调薪原因" prop="adjustReason">
                  <el-input
                    v-model="approvalForm4.procAdjustSalary.adjustReason"
                  ></el-input>
                </el-form-item>
                <el-form-item label="基本工资" prop="baseSalary">
                  <el-input
                    v-model="approvalForm4.procAdjustSalary.baseSalary"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="approvalDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="approvalInfo4"
                  >确 定</el-button
                >
              </span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="转正">
            <div style="display: inline">
              <el-form
                :model="approvalForm5"
                ref="approvalFormRef"
                label-width="90px"
              >
                <el-form-item label="部门名称" prop="departmentName">
                  <el-input v-model="approvalForm5.departmentName"></el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="username">
                  <el-input v-model="approvalForm5.username"></el-input>
                </el-form-item>
                <el-form-item label="工号" prop="jobNumber">
                  <el-input v-model="approvalForm5.jobNumber"></el-input>
                </el-form-item>
                <el-form-item label="申请时间" prop="procApplyTime">
                  <el-date-picker
                    v-model="approvalForm5.procApplyTime"
                  ></el-date-picker>
                </el-form-item>
                <!-- <el-form-item label="流程业务ID" prop="processId">
                  <el-input v-model="approvalForm5.processId"></el-input>
                </el-form-item>
                <el-form-item label="流程实例ID" prop="processInstanceId">
                  <el-input
                    v-model="approvalForm5.processInstanceId"
                  ></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="流程标识" prop="processKey">
                  <el-input v-model="approvalForm5.processKey"></el-input>
                </el-form-item>
                <el-form-item label="流程名称" prop="processName">
                  <el-input v-model="approvalForm5.processName"></el-input>
                </el-form-item>
                <el-form-item label="流程状态" prop="processState">
                  <el-input v-model="approvalForm5.processState"></el-input>
                </el-form-item> -->

                <el-form-item label="对公司的意见和建议" prop="advice">
                  <el-input
                    v-model="approvalForm5.procPositive.advice"
                  ></el-input>
                </el-form-item>
                <el-form-item label="入职日期" prop="hireDate">
                  <el-date-picker
                    v-model="approvalForm5.procPositive.hireDate"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="试用期工作总结" prop="jobSummary">
                  <el-input
                    v-model="approvalForm5.procPositive.jobSummary"
                  ></el-input>
                </el-form-item>
                <el-form-item label="试用期岗位" prop="trialJob">
                  <el-input
                    v-model="approvalForm5.procPositive.trialJob"
                  ></el-input>
                </el-form-item>
                <el-form-item label="对本岗位的理解" prop="trialJobText">
                  <el-input
                    v-model="approvalForm5.procPositive.trialJobText"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="approvalDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="approvalInfo5"
                  >确 定</el-button
                >
              </span>
            </div>
          </el-tab-pane>
          <el-tab-pane label="离职">
            <div style="display: inline">
              <el-form
                :model="approvalForm6"
                ref="approvalFormRef"
                label-width="90px"
              >
                <el-form-item label="部门名称" prop="departmentName">
                  <el-input v-model="approvalForm6.departmentName"></el-input>
                </el-form-item>
                <el-form-item label="申请人" prop="username">
                  <el-input v-model="approvalForm6.username"></el-input>
                </el-form-item>
                <el-form-item label="工号" prop="jobNumber">
                  <el-input v-model="approvalForm6.jobNumber"></el-input>
                </el-form-item>
                <el-form-item label="申请时间" prop="procApplyTime">
                  <el-input v-model="approvalForm6.procApplyTime"></el-input>
                </el-form-item>
                <!-- <el-form-item label="流程业务ID" prop="processId">
                  <el-input v-model="approvalForm6.processId"></el-input>
                </el-form-item>
                <el-form-item label="流程实例ID" prop="processInstanceId">
                  <el-input
                    v-model="approvalForm6.processInstanceId"
                  ></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="流程标识" prop="processKey">
                  <el-input v-model="approvalForm6.processKey"></el-input>
                </el-form-item>
                <el-form-item label="流程名称" prop="processName">
                  <el-input v-model="approvalForm6.processName"></el-input>
                </el-form-item>
                <el-form-item label="流程状态" prop="processState">
                  <el-input v-model="approvalForm6.processState"></el-input>
                </el-form-item> -->

                <el-form-item label="交接人员" prop="connectEmployee">
                  <el-input
                    v-model="approvalForm6.procSeparation.connectEmployee"
                  ></el-input>
                </el-form-item>
                <el-form-item label="入职日期" prop="entryDate">
                  <el-date-picker
                    v-model="approvalForm6.procSeparation.entryDate"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="所属岗位" prop="job">
                  <el-input
                    v-model="approvalForm6.procSeparation.job"
                  ></el-input>
                </el-form-item>
                <el-form-item label="离职日期" prop="separationDate">
                  <el-datepicker
                    v-model="approvalForm6.procSeparation.separationDate"
                  ></el-datepicker>
                </el-form-item>
                <el-form-item label="离职原因" prop="separationReason">
                  <el-input
                    v-model="approvalForm6.procSeparation.separationReason"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="approvalDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="approvalInfo6"
                  >确 定</el-button
                >
              </span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>

      <!-- 审批操作弹窗 -->
      <el-dialog
        title="审批信息"
        :visible.sync="infoDialogVisible"
        width="40%"
        @close="infoDialogClosed"
      >
        <el-form
          :model="infoForm"
          :rules="infoFormRules"
          ref="infoFormRef"
          label-width="100px"
        >
          <el-form-item label="工号" prop="jobNumber">
            <el-input v-model="infoForm.jobNumber"></el-input>
          </el-form-item>
          <el-form-item label="业务id" prop="processId">
            <el-input v-model="infoForm.processId"></el-input>
          </el-form-item>
          <el-form-item label="审批意见" prop="handleOpinion">
            <el-input v-model="infoForm.handleOpinion"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="agree" :loading="loding"
            >通过</el-button
          >
          <el-button type="danger" @click="turnDown" :loading="loding1"
            >驳回</el-button
          >
          <el-button type="success" @click="revoke" :loading="loding2"
            >撤销</el-button
          >
        </span>
      </el-dialog>
      <!-- 进度查询表 -->
      <el-dialog
        title="审批信息"
        :visible.sync="scheduleDialogVisible"
        width="40%"
        @close="scheduleDialogClosed"
      >
        <el-form ref="scheduleFormRef">
          <el-table border stripe :data="scheduleInfo">
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column label="工号" prop="handleJobNumber">
            </el-table-column>
            <el-table-column label="发起申请" prop="handleOpinion">
            </el-table-column>
            <el-table-column label="申请时间" prop="handleTime">
            </el-table-column>
            <el-table-column label="申请类型" prop="handleType">
            </el-table-column>
            <el-table-column label="申请用户" prop="handleUserName">
            </el-table-column>
            <el-table-column label="业务id" prop="processId"> </el-table-column>
            <el-table-column label="任务id" prop="taskId"> </el-table-column>
            <el-table-column label="任务关键词" prop="taskKey">
            </el-table-column>
            <el-table-column label="任务名" prop="taskName"> </el-table-column>
          </el-table>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      //获取的列表数据
      approvalList: [],

      approvalList2: [],
      total: 0,
      approval: {
        jobNumber: "",
        processKey: "",
        processState: "",
        processName: "",
        departmentName: "",
        procCurrNodeUserGroup: "",
        currentPage: 1,
        pageSize: 10,
      },
      approval2: {
        jobNumber: "",
        processKey: "",
        processState: "0",
        processName: "",
        departmentName: "",
        procCurrNodeUserGroup: "",
        currentPage: 1,
        pageSize: 10,
      },
      //审批搜索参数
      //  approval3: {
      //   processState: "",
      //   processName: "",
      // },
      //创建审批对话框隐藏
      approvalDialogVisible: false,
      //创建审批信息对象
      approvalForm: {
        departmentName: "",
        jobNumber: "",
        username: "",
        procApplyTime: "",
        procCurrNodeUserGroup: "",
        processId: "",
        processInstanceId: "",
        processKey: "overtime",
        processName: "加班",
        processState: "0",
        procOvertime: {
          duration: "",
          endTime: "",
          overtimeReason: "",
          startTime: "",
        },
      },
      approvalForm1: {
        departmentName: "",
        jobNumber: "",
        username: "",
        procApplyTime: "",
        procCurrNodeUserGroup: "",
        processId: "",
        processInstanceId: "",
        processKey: "travel",
        processName: "出差",
        processState: "0",
        procTravel: {
          address: "",
          days: "",
          endTime: "",
          startTime: "",
          travelReason: "",
          travelTools: "",
        },
      },
      approvalForm2: {
        departmentName: "",
        jobNumber: "",
        username: "",
        procApplyTime: "",
        procCurrNodeUserGroup: "",
        processId: "",
        processInstanceId: "",
        processKey: "fillClock",
        processName: "补卡",
        processState: "0",
        procAdjustJob: {
          fillClockReason: "",
          fillClockTime: "",
        },
      },
      approvalForm3: {
        departmentName: "",
        jobNumber: "",
        username: "",
        procApplyTime: "",
        procCurrNodeUserGroup: "",
        processId: "",
        processInstanceId: "",
        processKey: "adjustJob",
        processName: "调岗",
        procFillClock: "0",
        procAdjustJob: {
          effectiveDate: "",
          hireDate: "",
          newDepartment: "",
          newJob: "",
          oldDepartment: "",
          oldJob: "",
        },
      },
      approvalForm4: {
        departmentName: "",
        jobNumber: "",
        username: "",
        procApplyTime: "",
        procCurrNodeUserGroup: "",
        processId: "",
        processInstanceId: "",
        processKey: "adjustSalary",
        processName: "调薪",
        processState: "0",
        procAdjustSalary: {
          adjustLines: "",
          adjustReason: "",
          baseSalary: "",
        },
      },
      approvalForm5: {
        departmentName: "",
        jobNumber: "",
        username: "",
        procApplyTime: "",
        procCurrNodeUserGroup: "",
        processId: "",
        processInstanceId: "",
        processKey: "positive",
        processName: "转正",
        processState: "0",
        procPositive: {
          advice: "",
          hireDate: "",
          jobSummary: "",
          trialJob: "",
          trialJobText: "",
        },
      },
      approvalForm6: {
        departmentName: "",
        jobNumber: "",
        username: "",
        procApplyTime: "",
        procCurrNodeUserGroup: "",
        processId: "",
        processInstanceId: "",
        processKey: "separation",
        processName: "离职",
        processState: "0",
        procSeparation: {
          connectEmployee: "",
          entryDate: "",
          job: "",
          separationDate: "",
          separationReason: "",
        },
      },
      //创建审批信息规则
      approvalFormRules: {},
      //审批弹窗关闭，提交表单及验证规则
      infoDialogVisible: false,
      //审批加载
      loding: false,
      loding1: false,
      loding2: false,
      //审批意见参数
      infoForm: {
        handleOpinion: "",
      },
      infoFormRules: {
        handleOpinion: [
          { required: true, message: "请输入审批通过意见", trigger: "blur" },
          {
            min: 1,
            max: 200,
            message: "审批通过意见为1~200个字符之间",
            trigger: "blur",
          },
        ],
        jobNumber: [
          { required: true, message: "请输入工号", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "工号为2~20个字符之间",
            trigger: "blur",
          },
        ],
        processId: [
          { required: true, message: "请输入业务id", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "业务id为2~50个字符之间",
            trigger: "blur",
          },
        ],
      },
      //进度查询对话框隐藏
      scheduleDialogVisible: false,
      scheduleInfo: [],
      //搜索下拉框选项
      options: [
        {
          value: "0",
          label: "待审批",
        },
        {
          value: "1",
          label: "审批中",
        },
        {
          value: "2",
          label: "审批通过",
        },
        {
          value: "3",
          label: "审批不通过",
        },
        {
          value: "4",
          label: "撤销",
        },
        {
          value: "5",
          label: "等待销假",
        },
      ],
      options1: [
        {
          value: "请假",
          label: "请假",
        },
        {
          value: "报销",
          label: "报销",
        },
        {
          value: "出差",
          label: "出差",
        },
        {
          value: "补卡",
          label: "补卡",
        },
        {
          value: "调岗",
          label: "调岗",
        },
        {
          value: "调薪",
          label: "调薪",
        },
        {
          value: "加班",
          label: "加班",
        },
        {
          value: "离职",
          label: "离职",
        },
        {
          value: "转正",
          label: "转正",
        },
      ],
    };
  },
  created() {
    this.approval.currentPage = 1;
    this.approval.pageSize = 10;
    this.getList();
    this.getList2();
  },
  methods: {
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取我的审批信息接口
    getList() {
      let number = JSON.parse(sessionStorage.getItem("jobNumberx"));
      console.log(number);
      this.approval.jobNumber = number;

      this.$http.post("audit/instanceQuery", this.approval).then((res) => {
        console.log(res);

        this.approvalList = res.data.rows;
        // this.total = res.data.total;
        console.log(this.approvalList);

        // this.approvalList.map(item => { return item.processState })

        // this.approvalList.processState = "待审批";

        // if (this.approvalList[index].processState == "4") {
        //   this.approvalList.processState == "撤销";
        // }
        if (res.data.flag !== true) {
          return this.$message.error("获取我的审批信息失败!");
        }
      });
    },
    //监听信息条数
    handleSizeChange(newSize) {
      console.log("11111", newSize);
      this.approval.pageSize = newSize;
      this.getList();
    },
    //监听页数
    handleCurrentChange(newPage) {
      console.log("22222", newPage);
      this.approval.currentPage = newPage;
      this.getList();
    },
    //获取权限审批信息接口
    getList2() {
      let role = JSON.parse(sessionStorage.getItem("rolee"));
      console.log(role.role);
      const arr = role.role.split("_");
      console.log(arr[1]);
      this.approval2.procCurrNodeUserGroup = arr[1];
      this.$http.post("audit/instanceQuery", this.approval2).then((res) => {
        console.log(res);
        this.approvalList2 = res.data.rows;
        this.total = res.data.total;
        if (res.data.flag !== true) {
          return this.$message.error("获取权限审批信息失败!");
        }
      });
    },

    //监听信息条数
    handleSizeChange2(newSize) {
      // console.log(newSize);
      this.approval2.pageSize = newSize;
      this.getList2();
    },
    //监听页数
    handleCurrentChange2(newPage) {
      // console.log(newPage);
      this.approval2.currentPage = newPage;
      this.getList2();
    },
    //监听创建审批表单的关闭事件
    approvalDialogClosed() {
      this.$refs.approvalFormRef.resetFields();
    },
    //创建审批信息接口
    approvalInfo() {
      this.$http.post("audit/startProcess", this.approvalForm).then((res) => {
        console.log(res);
        this.approvalDialogVisible = false;
        if (res.data.flag !== true) {
          return this.$message.error("创建加班信息失败!");
        }
        this.$message.success("创建加班信息成功!");
      });
    },
    approvalInfo1() {
      this.$http.post("audit/startProcess", this.approvalForm1).then((res) => {
        console.log(res);
        this.approvalDialogVisible = false;
        if (res.data.flag !== true) {
          return this.$message.error("创建出差信息失败!");
        }
        this.$message.success("创建出差信息成功!");
      });
    },
    approvalInfo2() {
      this.$http.post("audit/startProcess", this.approvalForm2).then((res) => {
        console.log(res);
        this.approvalDialogVisible = false;
        if (res.data.flag !== true) {
          return this.$message.error("创建补卡信息失败!");
        }
        this.$message.success("创建补卡信息成功!");
      });
    },
    approvalInfo3() {
      this.$http.post("audit/startProcess", this.approvalForm3).then((res) => {
        console.log(res);
        this.approvalDialogVisible = false;
        if (res.data.flag !== true) {
          return this.$message.error("创建调岗信息失败!");
        }
        this.$message.success("创建调岗信息成功!");
      });
    },
    approvalInfo4() {
      this.$http.post("audit/startProcess", this.approvalForm4).then((res) => {
        console.log(res);
        this.approvalDialogVisible = false;
        if (res.data.flag !== true) {
          return this.$message.error("创建调薪信息失败!");
        }
        this.$message.success("创建调薪信息成功!");
      });
    },
    approvalInfo5() {
      this.$http.post("audit/startProcess", this.approvalForm5).then((res) => {
        console.log(res);
        this.approvalDialogVisible = false;
        if (res.data.flag !== true) {
          return this.$message.error("创建转正信息失败!");
        }
        this.$message.success("创建转正信息成功!");
      });
    },
    approvalInfo6() {
      this.$http.post("audit/startProcess", this.approvalForm6).then((res) => {
        console.log(res);
        this.approvalDialogVisible = false;
        if (res.data.flag !== true) {
          return this.$message.error("创建离职信息失败!");
        }
        this.$message.success("创建离职信息成功!");
      });
    },
    //审批通过表单的关闭事件
    infoDialogClosed() {
      this.$refs.infoFormRef.resetFields();
    },
    //审批操作取消按钮操作
    cancel() {
      this.infoDialogVisible = false;
      this.loding = false;
      this.loding1 = false;
      this.loding2 = false;
    },
    //审批详细信息接口
    infoId(processId) {
      console.log(processId);
      this.$http({
        url: "audit/selectInstanceById",
        params: {
          processId: processId,
        },
        method: "get",
      }).then((res) => {
        console.log(res);
        this.infoForm = res.data.data;
        console.log(this.infoForm);
        this.infoDialogVisible = true;
      });
    },
    //审批通过接口
    async agree() {
      this.loding = true;
      this.$http({
        url: "audit/completeTask?order=2",
        params: {
          jobNumber: this.infoForm.jobNumber,
          processId: this.infoForm.processId,
          handleOpinion: this.infoForm.handleOpinion,
        },
        method: "post",
      }).then((res) => {
        console.log(res);
        if (res.data.flag !== true) {
          return this.$message.error("审批通过失败!");
        }
        this.$message.success("审批通过成功!");
        this.infoDialogVisible = false;
        this.loding = false;
        this.getList();
        this.getList2();
      });
      // .finaly(() => {
      //   this.loding = false;
      // });
    },
    //审批驳回接口
    turnDown() {
      this.loding1 = true;
      this.$http({
        url: "audit/completeTask?order=3",
        params: {
          jobNumber: this.infoForm.jobNumber,
          processId: this.infoForm.processId,
          handleOpinion: this.infoForm.handleOpinion,
        },
        method: "post",
      }).then((res) => {
        console.log(res);
        if (res.data.flag !== true) {
          return this.$message.error("驳回审批信息失败!");
        }
        this.$message.success("驳回审批信息成功!");
        this.infoDialogVisible = false;
        this.loding1 = false;
        this.getList();
        this.getList2();
      });
    },
    //审批撤销接口
    revoke() {
      this.loding2 = true;
      this.$http({
        url: "audit/completeTask?order=4",
        params: {
          jobNumber: this.infoForm.jobNumber,
          processId: this.infoForm.processId,
          handleOpinion: this.infoForm.handleOpinion,
        },
        method: "post",
      }).then((res) => {
        console.log(res);
        if (res.data.flag !== true) {
          return this.$message.error("撤销审批信息失败!");
        }
        this.$message.success("撤销审批信息成功!");
        this.infoDialogVisible = false;
        this.loding2 = false;
        this.getList();
        this.getList2();
      });
    },
    //监听审批进度表单的关闭事件
    scheduleDialogClosed() {
      this.$refs.scheduleFormRef.resetFields();
    },
    //查询审批进度
    schedule(processId) {
      console.log(processId);
      this.$http
        .get(
          "/audit/approvals",
          { params: { processId } },
          {
            headers: {
              "Content-Type": "multipart/form-data",
            },
          }
        )
        .then((res) => {
          console.log(res);
          if (res.data.flag !== true) {
            return this.$message.error("查询审批进度失败!");
          }
          this.$message.success("查询审批进度成功!");
          this.scheduleInfo = res.data.data;
          console.log(this.scheduleInfo);
          this.scheduleDialogVisible = true;
        });
    },
    //审批搜索
    // search(){
    //    this.$http.post("audit/instanceQuery", this.approval3).then((res) => {
    //     console.log(res)
    //   });
    // },
  },
};
</script>

<style scoped></style>
